<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D网格热力</title>
</head>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>

<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="../static/layui/layui.all.js"></script>
<script charset="utf-8"
        src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script>
<script>
    const $ = layui.$;

    initMap();
    function initMap() {
        const center = new TMap.LatLng(30.573095, 104.066143);
        let data = [];
        $.post({
            url: "http://127.0.0.1/foodShopSearch/queryHeatMap",
            async: false,
            success: function (res) {
                console.log(res);
                data = res;
            }
        });

        //初始化地图
        const map = new TMap.Map("container", {
            zoom: 10.5,//设置地图缩放级别
            pitch: 45,
            center: center,//设置地图中心点坐标
            mapStyleId: "style1" //个性化样式
        });
        //初始化网格热力图图并添加至map图层
        const grid = new TMap.visualization.Grid({
            sideLength: 1000, // 设置网格边长
            heightRange: [1, 5000], // 高度变化区间
            showRange: [1, 100] // 聚合数据显示区间

        }).addTo(map).setData(data);//设置数据

        // 数据聚合之后才能够真正获取值域范围
        grid.setShowRange(grid.getValueRange());
    }
</script>
</html>